<template>
  <section>
    <el-card shadow="never">
      <el-form inline size="small">
        <el-form-item :label="cycleData.name">
          <!-- filterable
            remote
            :remote-method="remoteMethod"
          :loading="loading"-->
          <el-select
            clearable
            class="selectStyle"
            v-model="value"
            placeholder="请选择"
            @visible-change="selectList"
            @change="selectChange"
          >
            <el-option
              v-for="item in this.cycleData.option"
              :key="item.id"
              :label="item.name"
              :value="item.tpno"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";

@Component
export default class MyApplication extends Vue {
  @Prop()
  protected cycleData!: any;
  protected value: any = null;
  protected loading: boolean = false;
  protected options: any = [];

  protected selectChange(val: any) {
    this.$emit("cycleChange", val);
  }

  protected remoteMethod(query: any) {
    if (query !== "") {
      this.loading = true;
      this.cycleData.option = this.cycleData.option.filter((item: any) => {
        return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1;
      });

      this.loading = false;
    } else {
      this.cycleData.options = [];
    }
  }
}
</script>

<style lang="scss" scoped>
mr_vertical_10 {
  margin: 10px 0;
}
.mr_w_10 {
  margin: 0 10px;
}
.margin-right {
  margin-right: 30px;
}
.el-form-item--small.el-form-item {
  margin-bottom: 0;
}
</style>


